<!--
title: Super Editor
layout:
-->
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ title }}</title>

    {{ components.favicon() }}

    {{ components.bootstrapJs() }}

    {{ components.highlightJs() }}

    {{ components.fontAwesome() }}

    <link rel="stylesheet" href="/styles/theme.css">
    <link rel="stylesheet" href="/styles/base_layout.css">
    <link rel="stylesheet" href="/styles/homepage.css">
    <link rel="stylesheet" href="/styles/funders.css">
  </head>

  <body>
    <main>
      <div id="appBar">
        <div class="title">Super Editor</div>
        <nav>
          <ul>
            <li><a href="/super-editor/guides">Guides</a></li>
            <li><a href="https://pub.dev/documentation/super_editor/0.3.0-dev.23/" target="_blank">API Docs</a></li>
            <li><a href="https://github.com/superlistapp/super_editor" target="_blank">GitHub</a></li>
            <li><a href="https://discord.gg/8hna2VD32s" target="_blank">Discord</a></li>
          </ul>
        </nav>
      </div>

      <section id="hero">
        <div class="featured">
          <div class="tagline">
            Flutter's Most Configurable<br>Document <span class="highlight">Editor</span> &amp; <span class="highlight">Reader</span><br>Toolkit<span class="caret">&nbsp;</span>
          </div>
          <div class="by-line">
            By the Flutter Bounty Hunters
          </div>
        </div>

        <nav class="sections">
          <a href="#Documents">Documents</a>

          <a href="#Chat">Chat</a>

          <a href="#AI">AI / GPT</a>

          <a href="#BuiltBy">Built By</a>
        </nav>

        <div id="banner-built-with-static-shock">
          <span class="message">This website was built with <a href="https://staticshock.io" target="_blank" class="static-shock">Static Shock!</a></span>
        </div>
      </section>

      <section id="Powering">
        <div class="content">
          <h4>Powering</h4>
          <div class="companies">
            <a href="https://superlistapp.com" target="_blank"><img src="/images/funders/superlist.png" height="64"></a>
            <a href="https://clearful.com" target="_blank"><img src="/images/funders/clearful.png" height="64"></a>
            <a href="https://clickup.com" target="_blank"><img src="/images/funders/clickup.png" height="64"></a>
            <a href="https://bringingfire.com" target="_blank"><img src="/images/funders/bringing-fire.png" height="64"></a>
            <a href="https://reflection.app" target="_blank"><img src="/images/funders/reflection.png" height="64"></a>
          </div>
        </div>
      </section>

      <section id="Install">
        <div class="content">
          <h4>Install</h4>
          <code>
            <div class="filename">pubspec.yaml</div>
            <div class="code-sample">
              <div class="line"><span class="highlight">dependencies:</span></div>
              <div class="line">&nbsp;&nbsp;<span class="highlight">super_editor:</span> 0.3.0-dev.23</div>
            </div>
          </code>
        </div>
      </section>

      <section id="Documents" class="feature">
        <div class="content">
          <div class="info">
            <h2>Document Editing</h2>
            <p class="tagline">Your design. Our editor.</p>
            <p>The Super Editor toolkit can build whatever you can imagine.</p>
            <a href="/super-editor/guides/" class="button">Get Started</a>
          </div>
          <div class="demo-desktop"></div>
        </div>
      </section>

      <section id="Chat" class="feature left-oriented">
        <div class="content">
          <div class="info">
            <h2>Chat</h2>
            <p class="tagline">Mobile apps love to chat.</p>
            <p>Send messages with images, list items, links, and more!</p>
            <a href="/super-editor/guides/chat/overview" class="button">Get Started</a>
          </div>
          <div class="demo-mobile"></div>
        </div>
      </section>

      <section id="AI" class="feature">
        <div class="content">
          <div class="info">
            <h2>AI / GPT</h2>
            <p class="tagline">You bring the AI. We'll bring the document.</p>
            <p>Super Editor is delivering editor and reader tools for AI.</p>
            <a href="/super-editor/guides/ai/overview" class="button">Get Started</a>
          </div>
          <div class="demo-desktop"></div>
        </div>
      </section>

      <section id="BuiltBy">
        <div class="content">
          <div class="info">
            <h2>Built By</h2>
            <p class="tagline">Creators. Funders. Contributors.</p>
            <p>We're making Flutter viable for document editing, rich text chat, and generative AI.</p>
          </div>
          <div class="row">
            <div class="created-by">
              <h3>Created By</h3>
              <p class="tagline">The Flutter Bounty Hunters</p>
              <div class="companies">
                <a href="https://flutterbountyhunters.com" target="_blank"><img src="/images/fbh_logo.png" height="48"></a>
              </div>
            </div>
            <div class="funded-by">
              <h3>Funded By</h3>
              <p class="tagline">Superlist, ClickUp, Clearful</p>
              <div class="companies">
                <a href="https://superlistapp.com" target="_blank"><img src="/images/funders/superlist.png" height="48"></a>
                <a href="https://clearful.com" target="_blank"><img src="/images/funders/clearful.png" height="48"></a>
                <a href="https://clickup.com" target="_blank"><img src="/images/funders/clickup.png" height="48"></a>
                <a href="https://bringingfire.com" target="_blank"><img src="/images/funders/bringing-fire.png" height="48"></a>
                <a href="https://reflection.app" target="_blank"><img src="/images/funders/reflection.png" height="48"></a>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <a href="https://flutterbountyhunters.com" target="_blank" class="button">Become a Funder</a>
          </div>

          <div class="contributors">
            <h3>Contributors</h3>
            <p>Thanks to everyone who has helped to build Super Editor!</p>
            <ol style="display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 0; margin-top: 32px; padding: 0; text-align: center;">
              {% set contributors = github.superlistapp.super_editor %}
              {% set contributorCount = 15 %}
              {% for contributor in contributors|take(contributorCount) %}
              <li style="display: inline-block; margin: 0; margin-right: 16px; margin-bottom: 16px; padding: 0;">
                <a
                    href="{{ contributor.userUrl }}"
                    target="_blank"
                    title="{{ contributor.userId }}"
                    style="display: inline-block; width: 64px; height: 64px; border-radius: 32px; background-image: url('{{ contributor.avatarUrl }}'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"></a>
              </li>
              {% endfor %}

              {% if contributors|length > contributorCount %}
              <li style="display: inline-block; margin: 0; padding: 0;">
                <div style="display: inline-block; margin: 0; padding: 0; width: 64px; height: 64px; border-radius: 32px; background: rgba(0, 0, 0, 0.05); line-height: 64px; text-align: center; vertical-align: middle;">
                  +{{  contributors|length - contributorCount  }}
                </div>
              </li>
              {% endif %}
            </ol>
          </div>
        </div>
      </section>

    </main>

    <footer>
      {{ components.footer() }}
    </footer>

    <script>
      function copyActivationToClipboard() {
        navigator.clipboard.writeText("super_editor: ^{{ pub.super_editor.version }}");
      }
    </script>
  </body>
</html>
